<template>
	<view class="container">
		<uni-popup ref="popup" type="center" :animation="true" :mask-click="false" style="width: 100%;height: 100%;">
			<view>
				<view style="font-size: 28px; position: relative;top:-10rpx;left: 90vw;" @click="close">x</view>
				<img :src="imgurl" alt="" style="width: 95vw;height: 195rpx;">
			</view>
		</uni-popup>
		<view class="main">
			<u-gap height="8" bgColor="#F4F4F4"></u-gap>
			<tui-sticky :scrollTop="scrollTop" :stickyHeight="stickyHeight" :stickyTop="stickyTop">
				<template v-slot:header>
					<view class="filter">
						<view class="filter-label" style="font-weight: 400;">最新活跃</view>
						<view class="filter-item">							
							<uni-data-select v-model="sort" :localdata="sortOptions" @change="bindFilterPickerChange"
								placeholder="" :clear="false" class="select-wrap"></uni-data-select>
						</view>
					</view>
				</template>
			</tui-sticky>
			<!-- 设计师列表 -->
			<scroll-view @scrolltolower="scrolltolowerBtn"  scroll-y="true" :style="'height:'+ H">
				<view class="yourElementClass"
					style="margin: 0 8rpx; display: grid;column-gap: 6rpx;grid-template-columns: repeat(2,1fr);row-gap: 32rpx;margin-bottom: 40rpx;">

					<!-- :style="'height:'+mainHeight+'px;'" :style="'height:'+ H"-->

					<view class="d-flex flex-column ttk"  style="" v-for="(designer, index) of designerList" :key="index">
						<view class="position-relative bg-light-secondary" style="height: 440rpx;background: none!important;">
							<image :src="designer.intro_cover" @click="toIntroduce(designer,index)"
								style="height: 440rpx;width: 100%;border-radius: 8px  8px 0 0;">
							</image>
							<image class="position-absolute" style="right: 25rpx;top: 25rpx;width: 64rpx;height: 64rpx;"
								src="/static/images/ysmHome/Group.png" mode=""></image>
						</view>
						<!-- height: 184rpx; -->
						<view class="" style="color: #818181;" @click="handleToShop(designer,index)">
							<view class="d-flex a-center" style="padding: 8rpx 0 4rpx 12rpx;">
								<view class="d-flex flex-column " style="font-size: 20rpx;gap: 16rpx;margin-left: 10rpx;">
									<view style="margin-bottom: -8rpx;" class="designer-desc-item">设计费: {{ designer.work_salary }}元/㎡</view>
									<view class="designer-desc-item" style="">已服务产值: {{ designer.service_num }}</view>
								</view>
								<view class="d-flex flex-column a-center" style="margin-left:108rpx;margin-top:6rpx;">
									<view class="label" style="font-size: 20rpx;height: 30rpx;line-height: 30rpx;margin-left: -10rpx;">预约量
									</view>
									<view class="number"
										style="font-size: 30rpx;width: 46rpx; line-height: 48rpx;height: 48rpx;">
										{{ designer.total_bookings }}
									</view>
									<!-- <view class="link">进店逛逛>></view> -->
								</view>
							</view>
							<view class="d-flex a-center" style="">
								<view class="designer-avatar" style="width: 64rpx;height: 64rpx;margin-left: 16rpx;">
									<image style="width: 64rpx;height: 64rpx;"
										:src="$wanlshop.ossYSM(designer.avatar, 64, 64, 2, 'avatar')"></image>
									<!-- :style="isAndroid ? 'zoom:0.5;' : ''" -->
									<view class="designer_level"
										style="display:flex;flex-direction:column;align-items:center;">
										<text
											:style="isAndroid ? 'font-size: 6rpx; zoom: 0.5' : 'font-size: 6rpx'">{{ designer.designer_level }}</text>
									</view>
								</view>
								<!-- <image style="width: 64rpx;height: 64rpx;" class="rounded-circle" :src="designer.avatar" mode=""></image> -->
								<view class="d-flex a-center" style="margin-left: 8rpx;">
									<text
										style="color: #333333;font-size: 28rpx;font-weight: 600;height: 40rpx;line-height: 40rpx;">{{ designer.username || designer.nickname }}</text>
									<view class="" style="margin-right: 18rpx;margin-left: 8rpx;">
										<view v-if="designer.is_online===1" class="d-flex a-center j-center"
											style="padding: 4rpx 0 2rpx 0; gap:4rpx;width: 54rpx;height: 28rpx;border-radius: 8rpx;background-color: #E0FAD9;">
											<view class="rounded-circle"
												style="padding-left: 4rpx; width: 8rpx;height:8rpx ;background-color: #6BC54A;">
											</view>
											<view class="d-flex a-center" style="padding-right: 6rpx;">
												<text style="color: #76BD53;font-size: 16rpx;">在线</text>
											</view>
										</view>
										<view class="d-flex a-center j-center" v-else
											style="padding: 4rpx 0 2rpx 0;gap: 8rpx; width: 54rpx;height: 28rpx;border-radius: 8rpx;background-color: #E7E7E7;">
											<view class="rounded-circle"
												style="padding-left: 4rpx;width: 8rpx;height: 8rpx;background-color: #818181;">
											</view>
											<view class="d-flex a-center" style="padding-right: 6rpx;">
												<text style="color: #818181;font-size: 16rpx;">离线</text>
											</view>
										</view>
									</view>
									<view class="comment" style="font-size: 20rpx;margin-left:14rpx;">{{ designer.comments }}条好评</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<StEmpty v-if="designerList.length === 0">暂无数据</StEmpty>
		</view>
		<!-- <uni-load-more :status="status" :content-text="contentText" v-if="designerList.length > 0" /> -->

	</view>
</template>

<script>
	import StEmpty from '@/components/st-empty/st-empty.vue';
	import StAvatar from '@/components/st-avatar/st-avatar.vue';
	import tuiSticky from "@/components/thorui/tui-sticky/tui-sticky.vue"

	export default {
		components: {
			StEmpty,
			StAvatar,
			tuiSticky,

		},
		props: {
			mainHeight: {
				type: Number
			}
		},

		data() {
			return {
				isAndroid: false,
				showScrollView: false,
				H: '',
				imgurl: '',
				scrollTop: 0,
				stickyTop: uni.upx2px(110),
				stickyHeight: '80rpx',

				swiperDotIndex: 0,
				bannerList: [],

				searchValue: '',
				sort: 'smart',

				// smart 智能排序 
				// comments 好评优先  
				// service_num 产值优先 
				// work_salary_asc 设计费低价
				// work_salary_desc 设计费高价
				typeOptions: [{
						name: '综合排序',
						value: 'smart'
					},
					{
						name: '预约量优先',
						value: 'numberOfAppointments'
					},
					{
						name: '好评优先',
						value: 'comments'
					},
					{
						name: '产值排序',
						value: 'service_num'
					},
					{
						name: '设计费低价',
						value: 'work_salary_asc'
					},
					{
						name: '设计费高价',
						value: 'work_salary_desc'
					},
				],
				menuList: [{
						icon: '../../static/images/ysmHome/menu-1.png',
						name: '实景案例',
						path: '/pagesYSM/ysmDesignerShop/ysmVideoMapping',
					},
					{
						icon: '../../static/images/ysmHome/menu-2.png',
						name: '在线工地',
						path: '/pagesYSM/ysmDesignerShop/siteLive',
					},
					{
						icon: '../../static/images/ysmHome/menu-3.png',
						name: '社会公益',
						path: '/pagesYSM/ysmDesignerShop/ysmPublicWelfare'
					},
					{
						icon: '../../static/images/ysmHome/menu-4.png',
						name: '促销活动',
						path: '/pagesYSM/ysmSalesPromotion/ysmSalesPromotion'
					},
				],
				designerList: [
					/* {
						name: '张三',
						avatar: '../../static/images/ysmHome/avatar-1.png',
						desc: '设计师'
					}, */
				],

				scrollStype: false, //滚动状态
				Opacity: 0,
				reload: false, //判断是否上拉
				page: 1,
				last_page: 0,
				status: 'loading',
				searchValue:'',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '', // 没有更多数据了
				},
			}
		},
		computed: {
			sortOptions() {
				return this.typeOptions.map((item) => {
					return {
						label: item.name,
						text: item.name,
						value: item.value
					}
				});
			},
			sortInfo() {
				return this.typeOptions.find((item) => item.value === this.sort);
			}
		},
		created() {
			let systemInfo = uni.getSystemInfoSync();
			if (systemInfo.platform === 'android') {
				this.isAndroid = true;
			}
			console.log('this.isAndroid',this.isAndroid)
		},
		watch: {
			mainHeight(newVal) {				
				let systemInfo = uni.getSystemInfoSync();      //获取设备的信息				
				this.H = systemInfo.screenHeight- (newVal+30+16)+ 'px'
			}
		},
		// onReady() {
		// 	console.log('距离顶部的距离')

		// },
		mounted() {
			this.showScrollView = true;
			// uni.createSelectorQuery().select('.yourElementClass').boundingClientRect(data => {
			//   if(data){
			//     console.log('距离顶部的距离：', data.top);
			//   }
			// }).exec();
			// #ifdef H5
			this.stickyTop += 44;
			// #endif

			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			let navBarHeight = menuButtonInfo.top + menuButtonInfo.height + 8;
			let top = menuButtonInfo.top + (menuButtonInfo.height - 32) / 2;
			this.stickyHeight = `${navBarHeight}px`;

			this.stickyTop = uni.upx2px(navBarHeight + top + 20);

			this.loadData();
			this.queryBannerList();
		},
		// 监听上拉
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新onReachBottom scrolltolowerBtn

		onReachBottom() {
			if (this.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.page = this.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			refreshData(searchValue) {
				this.searchValue=searchValue
			    this.loadData();
				console.log("this.searchValue:",this.searchValue)
			},
			callBack(type) {
				this.$emit("callBack", type)
			},
			scrolltolowerBtn() {

				if (this.page >= this.last_page) {
					this.status = 'noMore';
				} else {
					this.reload = false;
					this.contentText.contentdown = '上拉显示更多';
					this.page = this.page + 1; //页码+1
					this.status = 'loading';
					this.loadData();
				}
			},

			toIntroduce(item,index) {
				if (item.intro_type === 2) {
					return
				}
				let data1 = this.designerList.map((aitem) => {
					return {
						id: aitem.id, 
						user_id:aitem.id,
						comments: aitem.comments,
						intro: aitem.intro,
						service_num: aitem.service_num,
						total_bookings: aitem.total_bookings,
						username: aitem.username,
						work_salary: aitem.work_salary,
						title:"testtstststt"
					}
				}) 
				let data = encodeURIComponent(JSON.stringify(data1));
				let current_data = {
					id: item.id,
					user_id:item.id,
					comments: item.comments,
					intro: item.intro,
					service_num: item.service_num,
					total_bookings: item.total_bookings,
					username: item.username,
					work_salary: item.work_salary,
					title: "testtstststt"
				}
				let current = encodeURIComponent(JSON.stringify(current_data)); 
				uni.navigateTo({
					url: `/pages/ysmIntroduceVidoe/ysmIntroduceVidoe?current=${current}&dataSouce=${data}&current_index=${index}`
				});
			},
			upImg(img) {
				this.imgurl = img
				this.$refs.popup.open('top')
			},
			// open() {

			// },
			close() {
				this.$refs.popup.close()
			},
			bindFilterPickerChange(e) {
				let value = e;
				this.sort = value;
				this.designerList = [];
				this.loadData();
			},
			handleSearch() {
				this.designerList = [];
				this.loadData();
				// uni.navigateTo({
				// 	url: '/pagesYSM/ysmSearch/ysmSearch'
				// })
			},
			loadData() {
				let params = {
					sort: this.sort,
					// order: 'asc',
					page: this.page,
				}
				if (this.searchValue) {
					params.search = this.searchValue
				}
				this.$api.get({
					url: '/wanlshop/user/getDesignerList',
					data: params,
					success: res => {
						uni.stopPullDownRefresh();
						this.status = 'more';
						
						uni.setStorageSync('dataSource',encodeURIComponent(JSON.stringify(res.data))); 

						this.designerList = this.reload ? this.designerList.concat(res
							.data):res.data; //数据 追加
						this.page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
					},
				});
			},
			handleToShop(item,index) {
				let data1 = this.designerList.map((aitem) => {1
					return {
						id: aitem.id, 
						user_id:aitem.id,
						comments: aitem.comments,
						intro: aitem.intro,
						service_num: aitem.service_num,
						total_bookings: aitem.total_bookings,
						username: aitem.username,
						work_salary: aitem.work_salary,
						title:"testtstststt"
					}
				}) 
				let data = encodeURIComponent(JSON.stringify(data1));
				let current_data = {
					id: item.id,
					user_id:item.id,
					comments: item.comments,
					intro: item.intro,
					service_num: item.service_num,
					total_bookings: item.total_bookings,
					username: item.username,
					work_salary: item.work_salary,
					title: "testtstststt"
				}
				let current = encodeURIComponent(JSON.stringify(current_data)); 
				uni.navigateTo({
					url: `/pagesYSM/ysmDesignerShop/ysmDesignerShop?shop_id=${item.id}&current=${current}&dataSouce=${data}&current_index=${index}`
				})
			},
			handleSalesPromotion(item) {
				// activityDetail=%7B%22id%22%3A4%2C%22title%22%3A%22%E8%AE%BE%E8%AE%A1%E4%BC%98%E6%83%A0%E4%B8%AD%22%2C%22desc%22%3A%22%3Cp%3E%3Cimg%20src%3D%5C%22https%3A%2F%2Fwww.ysmll.cn%2Fuploads%2F20230518%2Fd7c50dee084e6abf577755036b13b917.jpg%5C%22%20style%3D%5C%22width%3A%2050%25%3B%5C%22%20data-filename%3D%5C%22filename%5C%22%3E%3Cbr%3E%3C%2Fp%3E%22%2C%22createtime%22%3A1684385073%2C%22img%22%3A%22https%3A%2F%2Fwww.ysmll.cn%2Fuploads%2F20230518%2Fa6d4524dc3ed988133c8820d1e371247.jpg%22%2C%22updatetime%22%3A1684385073%2C%22starttime%22%3A1684252800%2C%22endtime%22%3A1685462400%2C%22status%22%3A0%2C%22user_id%22%3A9%2C%22shop_id%22%3A5%2C%22timeStr%22%3A%2211%E5%A4%A9%2014%3A30%3A39%22%7D
				let activityDetail = encodeURIComponent(JSON.stringify(item.activity_detail));
				uni.navigateTo({
					url: `/pagesYSM/ysmSalesPromotion/ysmSalesPromotionDetail?activityDetail=${activityDetail}`
				})
			},
			handleToYsmSalesPromotion(menu) {
				if (menu.path) {
					uni.navigateTo({
						url: menu.path,
					})
				}
			},

			// https://www.ysmll.cn/api/wanlshop/banner/lists
			queryBannerList() {
				this.$api.get({
					url: '/wanlshop/banner/lists',
					data: {},
					success: res => {
						this.bannerList = res.data;
					}
				})
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// console.log(e.scrollTop)
		}
	}
</script>

<style lang="less">
	// .filter .filter-item .uni-select{
	// 	background-color: white;
	// }
	.ttk{
		margin-top:-10rpx;
	}
	.ttk:nth-child(2),.ttk:nth-child(1){
		margin-top: 0;
	}
	.designer-avatar {
		width: 120rpx;
		height: 120rpx;
		position: relative;
		border-radius: 50%;
		overflow: hidden;
		z-index: 0;
		font-size: 6rpx;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;

		}

		.designer_level {
			position: absolute;
			z-index: 0;
			left: 0;
			bottom: 0;
			width: 64rpx;
			height: 20rpx;

			/* 缩小元素大小为原来的一半 */
			padding-top: 4rpx;
			text-align: center;
			background-color: rgba(196, 10, 10, 0.7);
			color: #fff;
		}
	}

	.designer-online {
		font-weight: 400;
		font-size: 20rpx;
		line-height: 28rpx;
		color: #818181;
		background: #E7E7E7;
		border-radius: 4px;
		padding: 2rpx 8rpx;
		margin-left: 16rpx;
		position: relative;
		white-space: nowrap;

		&::before {
			content: '';
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			background: #818181;
			border-radius: 50%;
			margin-right: 8rpx;
		}

		&.online {
			background: #E0FAD9;
			color: #76BD53;

			&::before {
				background: #6BC54A;
			}
		}
	}

	.number {
		font-weight: 600;
		font-size: 40rpx;
		line-height: 48rpx;
		color: #1D76C6;
	}

	/deep/.uni-popup {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.tag {
		background: #759AE1;
		color: #fff;
		padding: 2rpx 16rpx 2rpx 0rpx;
		font-weight: 400;
		font-size: 20rpx;
		line-height: 27rpx;
		position: relative;
		// min-width: 70rpx;
		text-align: center;
		margin-left: 30rpx;

		&::after {
			content: '';
			width: 0;
			height: 0;
			// background: #759AE1;
			position: absolute;
			right: -2rpx;
			top: 50%;
			transform: translateY(-50%);
			border: 20rpx solid transparent;
			border-right-color: #fff;
		}
	}

	.main {
		.header {
			// padding-top: 10rpx;
			background-color: #fff;
		}
	}

	.search {
		display: flex;
		align-items: center;
		background: #F6F7FB;
		border-radius: 80rpx;
		height: 60rpx;
		padding: 0 32rpx;

		.city {
			// margin-right: 20rpx;
			// padding-right: 60rpx;
			margin-right: 40rpx;
			padding-right: 40rpx;

			font-size: 28rpx;
			color: #333;
			border-right: 1rpx solid #E5E5E5;
			font-weight: 500;
			position: relative;

			// &::after {
			// 	content: '';
			// 	width: 0;
			// 	height: 0;
			// 	position: absolute;
			// 	right: 20rpx;
			// 	top: 60%;
			// 	transform: translateY(-50%);
			// 	border: 12rpx solid transparent;
			// 	border-top-color: #333;
			// }
		}

		.input {
			font-weight: 400;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.banner {

		height: 195rpx;

		.swiper-box {

			height: 100%;
			// padding: 0 20rpx;
			padding-bottom: 10rpx;

			.swiper-item {
				width: 95%;
				margin: 0 auto;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
				color: #fff;
			}

			/deep/ .wx-swiper-dots-horizontal {
				bottom: 10rpx !important;
			}

			/deep/ .wx-swiper-dot {
				// 指示点元素默认样式
				background-color: white;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
			}

		}

		image {
			border-radius: 20rpx;
			height: 100%;
			width: 100%;
			z-index: 999;
		}
	}

	.menus {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		border-bottom: 1rpx solid #E7E7E7;
		box-sizing: content-box;
		background-color: rgba(247, 247, 247);
		padding-top: 12rpx;


		.menus-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30rpx 0 20rpx 0;
			background-color: #fff;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			text {
				font-size: 26rpx;
				color: #333;
				margin-top: 20rpx;
			}

			&:not(:nth-child(4n)) {
				border-right: 1rpx solid #E7E7E7;
				box-sizing: content-box;
			}
		}
	}

	.tui-sticky-fixed {
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	}

	.filter {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding: 20rpx 62rpx;
		height: 60rpx;
		background-color: #fff;

		.filter-label {
			// font-weight: 600;
			font-size: 28rpx;
			line-height: 33rpx;
			color: #333333;

		}

		.filter-item {
			font-weight: 400;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #808080;

			/* text {
			padding: 4rpx 28rpx 4rpx 12rpx;
			background: #F6F6F6;
			border-radius: 4px;

			position: relative;

			&::after {
				content: '';
				width: 0;
				height: 0;
				position: absolute;
				right: 5rpx;
				top: 60%;
				transform: translateY(-50%);
				border: 8rpx solid transparent;
				border-top-color: #D9D9D9;
			}
		} */
			/deep/ .uni-select {
				border: none !important;
				font-weight: 500;
				font-size: 24rpx;
				line-height: 24rpx;
				background: #fff;
				padding-left: 0;
				padding-right: 0;
				// width: 160rpx !important;
				background-color: white !important;

				.uni-select__input-text {
					color: #808080 !important;
				}

				.uni-select__selector-item {
					font-size: 20rpx;
				}
			}

		}
	}

	.designer-list {
		padding-bottom: 40rpx;

		.designer-item {
			margin-top: 16rpx;
			background-color: #fff;
			padding: 16rpx 48rpx;
		}

		.designer-item-info {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			.designer-avatar {
				width: 140rpx;
				height: 140rpx;

				.designer_level {
					height: 42rpx;
				}
			}

			.designer-info {
				width: calc(100% - 140rpx);
				padding-left: 32rpx;
				display: flex;

				.left {
					width: calc(100% - 208rpx);
				}

				.right {
					width: 208rpx;
					text-align: center;
					border-left: 1px dashed #818181;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.label {
						font-weight: 400;
						font-size: 24rpx;
						line-height: 30rpx;
						color: #818181;
					}

					.number {
						font-weight: 600;
						font-size: 44rpx;
						line-height: 48rpx;
						color: #1D76C6;
					}

					.link {
						font-weight: 400;
						font-size: 26rpx;
						line-height: 34rpx;
						color: #1D76C6;
						margin-top: 12rpx;
						padding-left: 26rpx;
					}
				}

				.designer-name {
					font-weight: 600;
					font-size: 32rpx;
					line-height: 40rpx;
					color: #333333;
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					text {
						max-width: 75px;
					}

					.designer-online {
						font-weight: 400;
						font-size: 20rpx;
						line-height: 28rpx;
						color: #818181;
						background: #E7E7E7;
						border-radius: 4px;
						padding: 2rpx 8rpx;
						margin-left: 16rpx;
						position: relative;
						white-space: nowrap;

						&::before {
							content: '';
							display: inline-block;
							width: 16rpx;
							height: 16rpx;
							background: #818181;
							border-radius: 50%;
							margin-right: 8rpx;
						}

						&.online {
							background: #E0FAD9;
							color: #76BD53;

							&::before {
								background: #6BC54A;
							}
						}
					}
				}

				.designer-desc {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 30rpx;
					color: #818181;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					// margin-top: 10rpx;
					margin-bottom: 5rpx;

					.designer-desc-item {
						font-size: 24rpx;
						margin-top: 10rpx;
					}

					.designer-desc-item:nth-child(2) {
						margin-top: 16rpx;
					}
				}
			}
		}

		.designer-speciality {
			// margin-top: 5rpx;
			display: flex;
			align-items: center;


			.label {
				margin-right: 18rpx;
				color: #fff;
				width: 70rpx;
			}

			.designer-speciality-item {
				width: calc(100% - 340rpx);
				font-size: 24rpx;
			}
		}

		.designer-activity {
			border-top: 1rpx dashed #aaaaaa;

			margin-top: 8rpx;
			padding-top: 8rpx;
			display: flex;
			align-items: center;

			.label {
				margin-right: 18rpx;
				color: #fff;
				width: 118rpx;


				&.tag {
					background: #FD9A00;
				}
			}

			.designer-activity-item {
				font-size: 24rpx;
				width: calc(100% - 120rpx);
			}
		}

		.comment {
			width: 208rpx;
			font-size: 24rpx;
			color: #818181;
			padding-left: 75rpx;
		}

		.designer-speciality-item,
		.designer-activity-item {
			font-weight: 400;
			font-size: 26rpx;
			line-height: 34rpx;
			color: #333333;
			// 超出一行...
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

	}
</style>